<template>
    <div class="detail_module_panel audit-record">
        <!--标题-->
        <h3 id="personal_info" class="detail_panel_title detail_panel_title_icon other_info_icon">{{$t('collection.auditRecord')}}</h3>
        <div class="panel_info_content">
            <!--照会记录-->
            <el-table class="loan_history_table" max-height="320" :data="tableData" style="width: 100%">
                <el-table-column align="left" prop="orderId" :label="$t('common.innerOrderId')" width="200"></el-table-column><!--内部订单号-->
                <el-table-column align="left" :label="$t('common.addTime')" width="180"><!--添加时间-->
                    <template slot-scope="scope">{{ scope.row.addTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
                <el-table-column align="left" prop="auditorName" :label="$t('audit.auditPerson')" width="150"></el-table-column><!--信审员-->
                <el-table-column align="left" prop="tv1Text" label="TV1" width="220"></el-table-column>
                <el-table-column align="left" prop="tv2Text" label="TV2" width="200"></el-table-column>
                <el-table-column align="left" prop="tv3Text" label="TV3" width="200">
                    <template slot-scope="scope">
                        {{ scope.row.tv3Code === 'G' ? scope.row.tv3Code + scope.row.tv3Text + '-' + scope.row.gtext : scope.row.tv3Text}}
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="tvRemark" label="" :label="$t('audit.TvExplanation')" min-width="200"><!--TV说明-->
                    <template slot-scope="scope">
                        <div class="l_remark">
                            <span v-if="!scope.row.tvRemark || (scope.row.tvRemark && scope.row.tvRemark.length <= 10)">{{ scope.row.tvRemark}}</span>
                            <el-popover v-if="scope.row.tvRemark && scope.row.tvRemark.length > 10" trigger="hover" placement="top">
                                <p>{{ scope.row.tvRemark }}</p>
                                <div slot="reference">
                                    <span v-if="scope.row.tvRemark.length > 10">{{ scope.row.tvRemark.substr(0, 10)}}...</span>
                                    <span v-else>{{ scope.row.tvRemark }}</span>
                                </div>
                            </el-popover>
                        </div>
                    </template>
                </el-table-column>
            </el-table><!--end table-->
            <pagination @pageChange="pageChange" :page="page">分页组件</pagination>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';

    let that = null;
    export default {
        name: 'auditRecord',
        components: {
            Pagination,
        },
        props: {
            userId: {
                default: ''
            },
            orderId: {
                default: ''
            }
        },
        mixins: [mixin],
        data() {
            return {
                tableData: [],
            };
        },
        methods: {
            // 获取照会注记
            getTableData(page = this.page) {
                const params = {
                    orderId: this.orderId,
                    userId: this.userId,
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                this.$api.audit.getTvRemarkList(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.tableData = data.data;
                        this.page.recordsTotal = data.pageCount;
                    }
                });
            },
        },
        filters: {
        },
        created() {
            this.page.pageSize = 4;
            this.getTableData();
        }
    };
</script>

<style lang="scss" scoped>
    .ml10 {
        margin-left: 10px;
    }

    .blue {
        color: #1983FA;
        margin-left: 10px;
    }

    .gray {
        color: #a6a8aa;
        margin-left: 10px;
    }

    .bold-font {
        font-weight: bold;
    }

    .contact {
        margin-bottom: 40px;
    }

    .contact_row.row {
        margin-bottom: 30px;
        .label {
            height: 24px;
            line-height: 24px;
        }
    }

    .dialog-title {
        float: left;
        .title_L {
            font-size: 20px;
            font-weight: 700;
        }
        .title_R {
            font-size: 12px;
            font-weight: 700;
            margin-left: 10px;
            margin-bottom: 20px;
        }
        .fontYellow {
            color: yellow;
        }
        .fontRed {
            color: red;
        }
        .fontNormal {
            color: inherit;
        }
    }
    .el-button {
        padding:4px;
    }
</style>
